<template>
  <div class="pageTop">
    <div class="pageTop_left">
      <div class="top_left" style="cursor: pointer;" @click="gohome">
        <img src="@/assets/img/townPreview/回到首页.png" alt="" />
        <span>回到首页</span>
      </div>
      <div>
        <i class="el-icon-cloudy-and-sunny"></i>
        <span>晴转多云 35℃</span>
      </div>
    </div>
    <div class="pageTop_mid">
      <span>一屏智控（齐贤街道）</span>
      <p>单位:(万元)</p>
    </div>
    <div class="pageTop_right">
      <span>{{ gettime }} {{ week }} （数据截至2021-07-02）</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gettime: "",
      week: "",
      timer:''
    };
  },
  created() {
    this.getTime();
  },
  methods: {
    gohome() {
      this.$router.push("/");
    },
    getTime() {
      let yy = new Date().getFullYear();
      let mm = this.getAddO(new Date().getMonth() + 1);
      let dd = this.getAddO(new Date().getDate());
      let hh = this.getAddO(new Date().getHours());
      let mf = this.getAddO(new Date().getMinutes());
      // let ss = this.getAddO(new Date().getSeconds());
      this.gettime = yy + "-" + mm + "-" + dd + " " + hh + ":" + mf;
      const wk = new Date().getDay();
      const weeks = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六"
      ];
      this.week = weeks[wk];
      this.timer=setTimeout(()=>{this.getTime()},10000)
    },
    getAddO(a) {
      return a < 10 ? "0" + a : a;
    }
  },
  beforeDestroy(){
    clearTimeout(this.timer)
  }
};
</script>

<style lang="scss" scoped>
$vw: 1920px;
@function px2vw($px) {
  @return $px / $vw * 100vw;
}
.pageTop {
  height: 100%;
  background-image: url("~@/assets/images/fullscreen/顶部组件.png");
  background-size: 100% 100%;
  display: flex;
}
.top_left {
  border: 1px solid #1fd2ff;
  border-radius: 9px;
  padding: px2vw(6px) px2vw(50px);
  margin-left: px2vw(20px);
  margin-top: px2vw(5px);
  img {
    vertical-align: middle;
  }
  span {
    color: #1fd2ff;
    display: inline-block;
    vertical-align: middle;
    font-size: px2vw(16px);
  }
}
.pageTop_left {
  width: 25%;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  i {
    margin-right: 10px;
    color: #1fd2ff;
  }
  span {
    font-size: px2vw(14px);
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    color: #1fd2ff;
  }
}
.pageTop_mid {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  p{
    position: absolute;
    font-size: px2vw(16px);
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    color: #1fd2ff;
    right: 0;
    bottom: -50%;
  }
  span {
    font-size: px2vw(32px);
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    color: #1fd2ff;
  }
}
.pageTop_right {
  width: 25%;
  height: 50%;
  display: flex;
  align-items: center;
  span {
    font-size: px2vw(14px);
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    color: #1fd2ff;
  }
}
</style>
